<template>
	<uni-popup ref="popup" type="center">
		<view class="content">
			<view class="hd">
				<icon class="iconfont icon" @click="close()">&#xe733;</icon>
			</view>
			<view class="bd">
				<view class="title">
					<icon class="iconfont icon icon-mobile" v-if="data.type=='mobile'">&#xe76f;</icon>
					<icon class="iconfont icon icon-weixin" v-if="data.type=='weixin'">&#xe7d5;</icon>
					<text v-if="data.type.indexOf('toim')==-1">{{data.type=='mobile'?'手机号：'+data.item.mobile:'微信号：'+data.item.weixin}}</text>
				</view>
				<view class="msg">
					<text v-if="data.type=='mobile'">经用户同意展示，请勿恶意骚扰、传播</text>
					<text v-else-if="data.type=='weixin'">复制到微信搜索即可添加咨询</text>
					<text v-else>{{data.type=='weixin_toim'?'该商户微信号未对外展示，推荐您在线咨询':'该商户手机号未对外展示，推荐您在线咨询'}}</text>
				</view>
			</view>
			<view class="ft">
				<button type="default" class="btn" hover-class="btnClickStyle" @click.stop="call(data.item.mobile)" v-if="data.type=='mobile'">拨打</button>
				<button type="default" class="btn" hover-class="btnClickStyle" @click.stop="copy(data.item.weixin)" v-else-if="data.type=='weixin'">复制微信号</button>
				<button type="default" class="btn" hover-class="btnClickStyle" @click.stop="toIm()" v-else>在线咨询</button>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive } from 'vue';
	const emits = defineEmits(['toIm'])
	const popup = ref(null);
	const data = reactive({
		type: '',
		item: {}
	})

	function call(num) {
		uni.makePhoneCall({
			phoneNumber: num
		});
		close();
	}

	function copy(v, type = 0) {
		uni.setClipboardData({
			data: v,
			complete: res => {
				close();
			}
		})
	}

	function toIm() {
		emits('toIm');
		close();
	}

	function open(item, type) {
		data.item = item;
		data.type = type;
		popup.value.open();
	}

	function close() {
		popup.value.close();
	}
	defineExpose({
		open,
		close
	})
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';

	.content {
		width: 640rpx;
		padding: 0 30rpx 10rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.hd {
		@include flex(row, flex-end);
		height: 80rpx;

		.icon {
			font-size: 36rpx;
			color: #666;
		}
	}

	.bd {
		.icon {
			margin-right: 10rpx;
			font-size: 36rpx;
			color: #666;

			&-mobile {
				color: $color;
			}

			&-weixin {
				color: $color;
			}
		}

		.title {
			@include flex(row, center);
			font-weight: 700;
			font-size: 32rpx;
			color: #111;
		}

		.msg {
			text-align: center;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.ft {
		.btn {
			width: 240rpx;
			height: 66rpx;
			line-height: 66rpx;
			margin: 30rpx auto;
			border-radius: 10rpx;
			border: 1px solid $color;
			text-align: center;
			background: $color;
			font-size: 24rpx;
			color: #fff;
		}
	}
</style>
